<template>
  <div class="box1">  
        <div v-for="(good, index) in goodlist" :key="index" class="shoplist1"  :ID="good.ID">
            <p>{{good.name}}</p>
            <ol class="detail">
                <li>
                    <img :src="good.img" />
                    <div class="right">
                        <h4>{{ good.title }}</h4>
                        <p>{{ good.have }}</p>
                        <div class="div">{{ good.desc}}</div>
                        <div class="price">￥<span>{{ good.price}}</span>
                        </div>
                    </div>
                </li>
            </ol>
        </div>
  </div>
</template>

<script>
export default {
  name: 'compone1',
  props:["typeID","goodlist"],
  data(){
    return{
        goodslist: []    
    }
  },
//   created(){
//       axios.post("getGoodsListNew.php",{data:'goodId=id'})
//       .then(res=>{
//           this.goodslist=res.data.data
//       });
// }
}
</script>


<style scoped>

.box1{width: 250px;
    background-color: rgb(21, 84, 148);
    }
.shoplist1{margin-bottom: 20px;width: 100%;}
.detail {
  margin-top: 20px;
}
.detail li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.detail li img {
  width: 70px;
  height: 70px;
  align-self: center;
}
.detail li .right {
  width: 180px;
  margin-left: 20px;
}
.detail li .right p {
  background-color: #f3f3f3;
  width: 85px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 12px;
  margin: 15px 0 15px;
}
.detail li .right .div {
  font-size: 12px;
  color: #dbdbdb;
  width: 160px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.detail li .right .price {
  font-weight: bold;
  margin-top: 15px;
}
   
</style>